<template>
  <div class="route-design">
    <div class="route-select">
      <label>起点：</label>
      <select v-model="startStation">
        <option v-for="s in stations" :key="s" :value="s">{{ s }}</option>
      </select>
      <label>终点：</label>
      <select v-model="endStation">
        <option v-for="s in stations" :key="s" :value="s">{{ s }}</option>
      </select>
      <button :disabled="!isReady" @click="queryRoute">查询</button>
    </div>
    <div class="route-result" v-if="route">
      <div v-for="step in route.steps" :key="step.station">
        <span>{{ step.station }}</span>
        <span v-if="step.isTransfer">（换乘）</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { useLineStore } from '@/store/lineStore'
const lineStore = useLineStore()
const stations = computed(() => {
  // 假设所有线路站点合并去重
  return [...new Set(Object.values(lineStore.stations || {}).flat())]
})
const startStation = ref('')
const endStation = ref('')
const isReady = computed(
  () =>
    startStation.value &&
    endStation.value &&
    startStation.value !== endStation.value
)
const route = ref(null)
async function queryRoute() {
  const res = await fetch(
    `/api/route?start=${startStation.value}&end=${endStation.value}`
  )
  route.value = await res.json()
  // TODO: 渲染地图路径
}
</script>
<style scoped>
.route-design {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 260px;
}
.route-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.route-result {
  margin-top: 8px;
}
</style>
